<template>
    <slot></slot>
    <hr>
    <slot name="name"></slot>
    <!-- 动态具名插槽 -->
    <slot :name="dynamicSlotName" :data="slotData"></slot>
    <slot name="slot23" :data="slotData2"></slot>
    <div class="slot-container">
        <div v-for="slotName in slotNames" :key="slotName">
            <slot :name="slotName" :data="getSlotData(slotName)"></slot>
        </div>
    </div>

    <hr>
    <!-- 作用域插槽 -->
    <div class="data-container">
        <div v-for="(item, index) in arr" :key="index">
            <slot name="data" :item="item"></slot>
        </div>
    </div>
    <slot name="xiaozhu" :personInfo="{ name: xiaozhu, age, sui }"></slot>
</template>
<script lang="ts" setup>
interface Person {
    id: number
    name: string
}

interface PersonInfo {
    name: string
    age: string
    sui: string
}

type List = {
    [index: number]: Person
}

const arr = ref<List>([
    {
        id: 1,
        name: '张三'
    },
    {
        id: 2,
        name: '李四'
    }
])

const age = ref('18')
const xiaozhu = ref('小猪今年')
const sui = '岁'
const dynamicSlotName = ref('slot11');
const slotData = ref({ message: '来自子组件的数据' });
const slotData2 = ref({ message: 'slot2得数据' });
const slotNames = ref(['slot1', 'slot2', 'slot3']);

const getSlotData = (slotName: string) => {
    return {
        message: `这是${slotName}的数据`,
        timestamp: new Date().toLocaleString()
    }
}
</script>
<style>
.slot-container {
    display: flex;
    flex-direction: column;
    align-items: center;
    gap: 10px;
}

.data-container {
    display: flex;
    flex-direction: column;
    gap: 8px;
    padding: 10px;
    border: 1px solid #eee;
    border-radius: 4px;
}
</style>